<template>
  <div class="container">
    <div v-show="!showDetails">
      <div>
        <el-button type="primary" icon="el-icon-download" @click="batch_outport">导出课程表(Excel导出)</el-button>
      </div>
      <br />
      <!-- 搜索 -->
      <table>
        <tr>
          <th>
            <span>学期：</span>
            <el-button
              @click="openSemesterList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="semesterSelect">{{semesterSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <span>班级：</span>
            <el-button
              @click="openInstructionClassList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="instructionClassSelect">{{instructionClassSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
        </tr>
        <tr>
          <th>
            <span>课程：</span>
            <el-button
              @click="openCourseList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="courseSelect">{{courseSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <span>教师：</span>
            <el-button
              @click="openTeacherList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="teacherSelect">{{teacherSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <el-button type="primary" icon="el-icon-search" @click="searchCurriculum">搜索</el-button>
          </th>
        </tr>
      </table>
      <!-- 学期筛选 -->
      <el-dialog title="选择学期" :visible.sync="openSemesterList">
        <el-input placeholder="请输入关键字" v-model="semesterKeyword">
          <template slot="prepend">学期名</template>
          <el-button slot="append" icon="el-icon-search" @click="getSemesterByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="semesterSelect">
          <el-radio
            v-for="(semester, index) in semesterList"
            :key="'semester'+index"
            :label="semester"
          >{{semester.name}}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="semesterSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openSemesterList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 课程筛选 -->
      <el-dialog title="选择课程" :visible.sync="openCourseList">
        <el-input placeholder="请输入关键字" v-model="courseKeyword">
          <template slot="prepend">课程名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCourseByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="courseSelect">
          <el-radio
            v-for="(course, index) in courseList"
            :key="'course'+index"
            :label="course"
          >{{course.name}}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="courseSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openCourseList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 班级筛选 -->
      <el-dialog title="选择班级" :visible.sync="openInstructionClassList">
        <el-input placeholder="请输入关键字" v-model="instructionClassKeyword">
          <template slot="prepend">班级名</template>
          <el-button slot="append" icon="el-icon-search" @click="getInstructionClassByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="instructionClassSelect">
          <el-radio
            v-for="(instructionClass, index) in instructionClassList"
            :key="'instructionClass'+index"
            :label="instructionClass"
          >{{instructionClass.name}}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="instructionClassSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openInstructionClassList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 教师筛选 -->
      <el-dialog title="选择教师" :visible.sync="openTeacherList">
        <el-input placeholder="请输入关键字" v-model="teacherKeyword">
          <template slot="prepend">教师名</template>
          <el-button slot="append" icon="el-icon-search" @click="getTeacherByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="teacherSelect">
          <el-radio
            v-for="(teacher, index) in teacherList"
            :key="'teacher'+index"
            :label="teacher"
          >{{teacher.name}}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="teacherSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openTeacherList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 课表列表 -->
      <div class="table">
        <el-table
          :data="lessonSchedule_list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          stripe
          border
          @row-click="rowClick"
          width="100%"
        >
          <el-table-column prop="semesterName" label="学期"></el-table-column>
          <el-table-column prop="courseName" label="课程名称"></el-table-column>

          <!-- element ui 使用过滤器 -->
          <el-table-column prop="instituteName" label="开设学院">
            <template slot-scope="scope">{{ scope.row.instituteName | ellipsis }}</template>
          </el-table-column>
          <el-table-column prop="className" label="授课班级"></el-table-column>
          <el-table-column prop="arrangeNumber" label="日期"></el-table-column>
          <el-table-column prop="attendanceNumber" label="作息"></el-table-column>
          <el-table-column prop="teacherName" label="授课教师"></el-table-column>
        </el-table>
        <br />
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          style="margin-left: 30%;"
        ></el-pagination>
      </div>
    </div>
    <!-- 某一课程详情组件 -->
    <div class="details" v-show="showDetails">
      <courseDetails :courseDetails="courseDetails" @showDetails="showDetails1" />
    </div>
  </div>
</template>

<script>
import { getAllSemester } from "@/api/semester";
import { getAllTeacher } from "@/api/teacher";
import { getAllCourse } from "@/api/course";
import { getAllInstructionClass } from "@/api/instructionClass";
import courseDetails from "@/views/education-instructionalMatters/curriculum/details";
import { searchUser } from "../../../api/remote-search";

export default {
  name: "curriculum",
  data() {
    return {
      tableTotal: 0,
      currentPage: 1,
      pagesize: 10,
      showDetails: false, //显示课程详情
      courseDetails: {}, //某一行课程的详情
      lessonSchedule_list: [], //全校的课程表
      institute_list: [], //学院列表

      teacherList: [], //教师列表
      teacherSelect: "", //选择的教师
      openTeacherList: false, //教师筛选框是否开启
      teacherKeyword: "", //教师筛选关键字

      instructionClassList: [], //班级列表
      instructionClassSelect: "", //选择的班级
      openInstructionClassList: false, //班级筛选框是否开启
      instructionClassKeyword: "", //班级筛选关键字

      courseList: [], //课程列表
      courseSelect: "", //选择的课程
      openCourseList: false, //课程筛选框是否开启
      courseKeyword: "", //课程筛选关键字

      semesterList: [], //学期列表
      semesterSelect: "", //选择的学期
      openSemesterList: false, //学期筛选框是否开启
      semesterKeyword: "", //学期筛选关键字
    };
  },
  components: {
    courseDetails,
  },
  filters: {
    //字数显示过滤器，字数超过6个用“...”表示
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 6) {
        return value.slice(0, 6) + "...";
      }
      return value;
    },
  },
  created() {
    //加载页面时,获取全校的课程表
    this.getLessonScheduleList();
    //获取学期列表
    this.getAllSemester();
    //获取教师列表
    this.getAllTeacher();
    //获取课程列表
    this.getAllCourse();
    //获取班级列表
    this.getAllInstructionClass();
  },
  methods: {
    //获取全校的课程表
    getLessonScheduleList() {
      this.lessonSchedule_list = [
        {
          id: "01",
          semesterId: "2019202001",
          semesterName: "2019-2020-1", //学期
          courseId: "0001", //课程编号
          courseName: "C语言", //课程名称
          instituteId: "01", //开设学院Id
          instituteName: "计算机科学与软件学院、大数据学院", //开课学院
          classId: "01", //班级id
          className: "软件一班", //教学班名称
          arrangeNumber: 90, //排课人数
          attendanceNumber: 80, //上课人数
          teacherId: "001",
          teacherName: "张三", //授课教师
          timePlace: [
            {
              week: "星期一", //星期几上课
              sectionTime: [
                { id: "01", sectionTime: "第一节" },
                { id: "02", sectionTime: "第二节" },
              ], //第几节
              place: "二教102", //上课地点
              sectionDescription: "理论课", //上课描述
            },
            {
              week: "星期二", //星期几上课
              sectionTime: [
                { id: "03", sectionTime: "第三节" },
                { id: "04", sectionTime: "第四节" },
              ], //第几节
              place: "中巴实验楼209", //上课地点
              sectionDescription: "实验课", //上课描述
            },
          ],
          classPeriod: 28, //课时
          description: "编程入门课程", //课程描述
        },
        {
          semesterId: "02",
          semesterName: "2019-2020-1", //学期
          courseId: "0002", //课程编号
          courseName: "数据库", //课程名称
          instituteId: "01", //学院Id
          instituteName: "计算机科学与软件学院、大数据学院", //开课学院
          classId: "01",
          className: "软件一班", //教学班名称
          arrangeNumber: 95, //排课人数
          attendanceNumber: 80, //上课人数
          teacherId: "002",
          teacherName: "李四", //授课教师
          place: "二教103", //上课地点
          timePlace: [
            {
              week: "星期一", //星期几上课
              sectionTime: [
                { id: "01", sectionTime: "第一节" },
                { id: "02", sectionTime: "第二节" },
              ], //第几节
              place: "二教102", //上课地点
              sectionDescription: "理论课", //上课描述
            },
            {
              week: "星期二", //星期几上课
              sectionTime: [
                { id: "03", sectionTime: "第三节" },
                { id: "04", sectionTime: "第四节" },
              ], //第几节
              place: "二教102", //上课地点
              sectionDescription: "理论课", //上课描述
            },
          ],

          classPeriod: 28, //课时
          description: "数据库基础", //课程描述
        },
        {
          semesterId: "03",
          semesterName: "2019-2020-1", //学期
          courseId: "0003", //课程编号
          courseName: "C语言", //课程名称
          instituteId: "01", //学院Id
          instituteName: "计算机科学与软件学院、大数据学院", //开课学院
          classId: "02",
          className: "软件二班", //教学班名称
          arrangeNumber: 95, //排课人数
          attendanceNumber: 80, //上课人数
          teacherId: "003",
          teacherName: "王五", //授课教师
          place: "二教103", //上课地点
          timePlace: [
            {
              week: "星期一", //星期几上课
              sectionTime: [
                { id: "03", sectionTime: "第三节" },
                { id: "04", sectionTime: "第四节" },
              ], //第几节
              place: "二教103", //上课地点
              sectionDescription: "理论课", //上课描述
            },
            {
              week: "星期二", //星期几上课
              sectionTime: [
                { id: "03", sectionTime: "第三节" },
                { id: "04", sectionTime: "第四节" },
              ], //第几节
              place: "二教103", //上课地点
              sectionDescription: "理论课", //上课描述
            },
          ],

          classPeriod: 28, //课时
          description: "编程入门", //课程描述
        },
        {
          semesterId: "02",
          semesterName: "2019-2020-1", //学期
          courseId: "0002", //课程编号
          courseName: "数据库", //课程名称
          instituteId: "01", //学院Id
          instituteName: "计算机科学与软件学院、大数据学院", //开课学院
          classId: "02",
          className: "软件二班", //教学班名称
          arrangeNumber: 95, //排课人数
          attendanceNumber: 80, //上课人数
          teacherId: "002",
          teacherName: "李四", //授课教师
          place: "二教103", //上课地点
          timePlace: [
            {
              week: "星期三", //星期几上课
              sectionTime: [
                { id: "03", sectionTime: "第三节" },
                { id: "04", sectionTime: "第四节" },
              ], //第几节
              place: "二教102", //上课地点
              sectionDescription: "理论课", //上课描述
            },
            {
              week: "星期四", //星期几上课
              sectionTime: [
                { id: "01", sectionTime: "第一节" },
                { id: "02", sectionTime: "第二节" },
              ], //第几节
              place: "二教102", //上课地点
              sectionDescription: "理论课", //上课描述
            },
          ],

          classPeriod: 28, //课时
          description: "数据库基础", //课程描述
        },
      ];
    },

    //批量Excel导出课程表
    batch_outport() {},

    // 获取学期列表
    getAllSemester() {
      getAllSemester().then((res) => {
        this.tableTotal = res.data.semesterList.length;
        this.semesterList = res.data.semesterList;
      });
    },

    //获取教师列表
    getAllTeacher() {
      getAllTeacher().then((res) => {
        this.teacherList = res.data.teacherList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then((res) => {
        this.courseList = res.data.courseList;
      });
    },

    //获取授课班级列表
    getAllInstructionClass() {
      getAllInstructionClass().then((res) => {
        this.instructionClassList = res.data.instructionClassList;
      });
    },

    //根据关键词搜索学期
    getSemesterByKeyword() {},

    //根据关键词搜索课程
    getCourseByKeyword() {},

    //根据关键词搜索班级
    getInstructionClassByKeyword() {},

    //根据关键词搜索教师
    getTeacherByKeyword() {},

    //根据条件搜索
    searchCurriculum() {},

    //点击课程列表中的某一列,显示课程详情
    rowClick(val) {
      this.courseDetails = val;
      this.showDetails = true;
    },

    //子组件课程详情组件传回来"false",
    showDetails1(val) {
      this.showDetails = val;
    },

    // 换页
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
.table {
  width: 100%;
  margin: auto;
}
span {
  font-weight: 500;
}
tr {
  height: 40px;
}
</style>
